<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>EaselJS Example: Rollovers and Drag & Drop</title>

	<link href="assets/demoStyles.css" rel="stylesheet" type="text/css" />

	<!-- Note: All core EaselJS classes are listed here: -->
	<script type="text/javascript" src="../src/createjs/events/Event.js"></script>
	<script type="text/javascript" src="../src/createjs/events/EventDispatcher.js"></script>
	<script type="text/javascript" src="../src/createjs/utils/IndexOf.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/Ticker.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Point.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Rectangle.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shadow.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/SpriteSheet.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Graphics.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Bitmap.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Sprite.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapAnimation.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapText.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shape.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Text.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DOMElement.js"></script>
	<script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
	<script type="text/javascript" src="../src/easeljs/filters/Filter.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/ButtonHelper.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/Touch.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetUtils.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetBuilder.js"></script>
	
	<script type="text/javascript" src="assets/tweenjs-NEXT.min.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/MovieClip.js"></script>
	
	<script type="text/javascript" src="assets/VectorButton.js"></script>

	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

	<script>

	var canvas, stage;

	var mouseTarget;	// the display object currently under the mouse, or being dragged
	var dragStarted;	// indicates whether we are currently in a drag operation
	var offset;
	var update = true;

	function init() {
		if (window.top != window) {
			document.getElementById("header").style.display = "none";
		}
		document.getElementById("loader").className = "loader";
		
		// create stage and point it to the canvas:
		stage = new createjs.Stage("testCanvas");

		// enable touch interactions if supported on the current device:
		createjs.Touch.enable(stage);

		// enable mouse over / out events, required for button rollovers
		stage.enableMouseOver(10);

		// load the source image:
		var image = new Image();
		image.src = "assets/bitmapButton.png";
		image.onload = handleImageLoad;
	}
	
	function handleImageLoad(evt) {
		document.getElementById("loader").className = "";
		
		// spritesheet "bitmap" button:
		var spriteSheet = new createjs.SpriteSheet({
			images: [evt.target],
			frames: {width:300, height:100},
			animations: { out: 0, over: 1, down: 2 }
		});
		var bitmapButton = new createjs.Sprite(spriteSheet, "up");
		stage.addChild(bitmapButton).set({x:50, y:50});
		var bitmapHelper = new createjs.ButtonHelper(bitmapButton);
		
		// movieclip "vector" button:
		var vectorButton = new lib.VectorButton();
		stage.addChild(vectorButton).set({x: 400, y:50});
		var vectorHelper = new createjs.ButtonHelper(vectorButton);
		
		bitmapButton.on("click", function() {
			vectorHelper.enabled = !vectorHelper.enabled;
			vectorButton.alpha = 0.5+vectorHelper.enabled*0.5;
		});
		
		createjs.Ticker.addEventListener("tick", stage);
	}
	</script>

</head>

<body onload="init();">

	<div id="loader"></div>

	<header id="header" class="EaselJS">
	    <h1><span class="text-product">Easel<strong>JS</strong></span> ButtonHelper Example</h1>
	    <p>Shows how to use a <code>ButtonHelper</code> with <code>Sprite</code> or <code>MovieClip</code> instances (or anything with a <code>gotoAndStop()</code> method). Clicking the bitmap button toggles <code>enabled</code> on the vector <code>ButtonHelper</code></p>
	</header>

	<div class="canvasHolder">
		<canvas id="testCanvas" width="960" height="400"></canvas>
	</div>
</body>
</html>
